---
title: SliderField
description: SliderField allows users to select a value within a defined range.
ariaPattern: https://www.w3.org/WAI/ARIA/apg/patterns/slider/
themeSource: packages/ui/src/theme/tokens/components/sliderField.ts
reactSource: packages/react/src/primitives/SliderField/SliderField.tsx
mdnUrl: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
htmlElement: span
supportedFrameworks: react
---
import { Fragment } from '@/components/Fragment';
import { PageTabLayout } from '@/components/Layout/PageTabLayout';
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
import data from '@/data/props-table.json';

export async function getStaticPaths() {
  return getCustomStaticPath(frontmatter.supportedFrameworks);
}

{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}

export async function getStaticProps() {
  return { props: {} }
}

<PageTabLayout 
  tabComponents={[{
    title: "Documentation", 
    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
  },
  {
    title: "Props", 
    children: <PropsTableTab 
                componentName={frontmatter.title} 
                PropsData={data} 
                htmlElement={frontmatter.htmlElement} 
                mdnUrl={frontmatter.mdnUrl}
              />
  }]}
/>